<template>
    <div class="InfoImg">
        <img :src="imgUrl" />
    </div>
    <h1 style="position: fixed; left:150px; top:100px">
        <slot name="title"></slot>
    </h1>
    <div style="overflow-y: scroll; position: fixed; right: 200px; top:150px;min-width: 500px;max-width:500px;height: 500px;">
        <em>评论</em>
        <slot name="content"></slot>
    </div>
    <div style="position: fixed;left:150px;bottom: 150px; width: max-content;">
        <n-card size="large" title="我的评价">
            <n-input v-model:value="comment" type="textarea" placeholder="我的评价" />
            <n-button round :color="liking ? '#ff50b0' : '#66ccff'" @click="liking = !liking">喜欢</n-button>
            <n-button round :color="'#66ccff'" @click="commitCommentClicked">提交评价</n-button>
            <n-button round :color="'#661200'" @click="deleteCommentClicked">删除我的评价</n-button>
        </n-card>
    </div>
    <div class="Ret">
        <n-button round secondary type="info" @click="ret">
            返回
        </n-button>
    </div>
</template>
<script>
import { useMessage } from 'naive-ui';
import { useStore } from 'vuex';
import { deleteComment, commitComment} from '../util';


export default {
    props: ["imgUrl","movieId"],
    setup() {
        window.$messageinfoPage = useMessage();
    },
    data() {
        return {
            rating: 0,
            liking: false,
            comment: '',
        }
    },
    methods: {
        ret() {
            this.$router.back();
        },
        deleteCommentClicked() {
            deleteComment(this.movieId);
        },
        commitCommentClicked() {
            commitComment(this.movieId, this.comment).then(
                ()=>{
                    window.$messageinfoPage.info('评论已发布');
                }
            ).catch(()=>{
                window.$messageinfoPage.warning('评论发布失败');
            })
        }
    }
}
</script>

<style scoped>
.InfoImg {
    position: fixed;
    top: 150px;
    left: 150px;
}

.Ret {
    position: fixed;
    top: 20px;
    left: 20px;
}
</style>